Vue.component("my-menu", {
    data: function () {
        return {
            isTop: 0,
            subMenu: {setting: "设置", test: "测试"}
        };
    },
    created() {
        this.$nextTick(() => {
            this.$refs.menu.$el.setAttribute("tabindex", -1);
            this.$refs.menu.$el.onblur = () => {
                let keys = Object.keys(this.subMenu)
                for (let i = 0; i < keys.length; i++) {
                    this.$refs.menu.close(keys[i]);
                }
            };
        });
    },
    mounted() {
        let data = {
            type: "main",
            cmd: "getIsAppTop",
        };
        this.send(data).then((res) => {
            this.isTop = res;
        });
    },
    methods: {
        send(data) {
            return window.electronAPI.sendMessage(data);
        },
        handleOpen(key, keyPath) {
            console.log(key);
            console.log(this.$refs.menu);
            let keys = Object.keys(this.subMenu)
            for (let i = 0; i < keys.length; i++) {
                if (keys[i] !== key) {
                    console.log("关闭：", keys[i])
                    this.$refs.menu.close(keys[i]);
                }
            }

        },
        handleClose(key, keyPath) {
            console.log("关闭", key, keyPath);
        },
        onBlur(event) {},
        handleSelect(key, keyPath) {
            if (key == "top") {
                let data = {
                    type: "main",
                    cmd: "appTop",
                    isTop: this.isTop,
                };
                this.send(data).then((res) => {
                    this.isTop = res;
                });
            }
            if (key == "console") {
                let data = {
                    type: "main",
                    cmd: "showConsole",
                };
                this.send(data);
            }
        },
    },
    // background-color="rgb(237 235 235)"
    template: `
      <el-menu ref="menu" @open="handleOpen" @close="handleClose" @select="handleSelect" background-color="#ffffff"
               text-color="#131313" active-text-color="none">
      <el-submenu index="setting">
        <template slot="title">
          <span slot="title">{{subMenu.setting}}</span>
        </template>
        <el-menu-item index="console">控制台</el-menu-item>
        <el-menu-item index="top" v-text="isTop == 0 ? '应用置顶' : '取消置顶'">
        </el-menu-item>
      </el-submenu>

      </el-menu>
        
    `,
});
